<template>
	<view class="cont">
		<view class="cont-body">
			<view class="task">
				<view class="task-item">
					<view class="task-title">
						<text>风险点：</text>
					</view>
					<view class="task-cont">{{ danger.position }}</view>
				</view>
				<view class="task-item">
					<view class="task-title">
						<text>风险描述：</text>
					</view>
					<view class="task-cont">{{ danger.description }}</view>
				</view>
			</view>
			
			<view class="task-image">
				<image :src="image" v-for="(image, index) in images" :key="index"></image>
			</view>
			
		</view>
	
		<!-- 按钮 -->
		<view class="cont-tabBar">
			<view class="cont-tabBar-row">
				<view class="cont-tabBar-item" @click="cancel">
					<text>取消</text>
				</view>
				<view class="cont-tabBar-item" @click="finish">
					<text>完成</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data: function () {
	        return {
				navTitle: "",
				sspid: '',
				danger: {
					id: '',
					position: '',
					description: '',
				},
				images: []
	        }
	    },
		onLoad:function(option){
			this.sspid = option.sspid;
			this.getDangerDetail();
		},
		methods:{
			// 获取风险详情
			getDangerDetail(){
				let _this = this;
				uni.showLoading({title: '加载中'});
				uni.request({
					url: _this.$API.dangerDetail,
					data: {sspid: _this.sspid},
					header:this.$API.get_head(),
					success: (res)=>{
						uni.hideLoading();
						_this.danger = res.data.data;
						
						// 动态设置头部
						uni.setNavigationBarTitle({
						    title: res.data.data.title
						});
						
						// 处理图片
						if(!res.data.data.pics) return;
						let pics = res.data.data.pics.split(',');
						_this.images = pics.map(item=>`${_this.$API.baseURL}${item}`);
					} 
				})
			},
			// 取消
			cancel(){
				uni.navigateBack();
			},
			// 完成
			finish(){
				let _this = this;
				uni.showLoading({title: '处理中'});
				uni.request({
					method: "POST",
					url: _this.$API.dangerFinish,
					data: {
						sspid: _this.sspid,
						userid: uni.getStorageSync("userid")
					},
					header:this.$API.get_head(),
					success: (res)=>{
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '操作成功'
						});
						setTimeout(()=>{
							uni.redirectTo({
								url: '../huihuandeweizhi/fengxianzhili'
							});
						},2000);
					} 
				})
			}
		}
	}
</script>

<style>
	@import "../../common/uni.css";
	
	page{
		height: 100%;
		background-color: #FFFFFF;
	}
	
	.fixedHeader.cont-header{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}
	.cont-header .status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background:#FFFFFF;
	}
	.cont-header .title{
		height:98upx;
		text-align: center;
		font-size:28upx;
		line-height:98upx;
		color: #333333;
		font-weight: bold;
		position:relative;
	}
	.cont-header .title .right{color:#b5b5b5;font-size:30upx;position:absolute;right:20upx;top:0;}
	
	.cont{
		padding-bottom: 120upx;
	}
	.cont-tabBar{
		width: 100vw;
		height: 100upx;
		box-sizing: border-box;
		padding: 10upx 30upx;
		background-color: #F8F8F8;
		border-top: 1px solid #EDEDED;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10000;
	}
	.cont-tabBar-row{
		height: 80upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.cont-tabBar-item{
		flex: 1;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #458DD3;
		text-align: center;
		position: relative;
	}
	.cont-tabBar-item:first-child:after{
		content: "";
		display: block;
		width: 2upx;
		height: 30upx;
		background-color: #CACACA;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
	}
	.cont-tabBar-item button{
		height: 100%;
		background-color: #F8F8F8;
		color: #458DD3;
		border: none;
		outline: none;
	}
	.cont-tabBar-item button:active{
		background-color: #F8F8F8;
		opacity: 0.6;
	}
	
	.task{
		background-color: #e5e5e5;
		padding: 2upx 0 50upx;
	}
	.task-item{
		background-color: #FFFFFF;
		padding: 30upx 50upx;
	}
	.task-item:nth-child(n+2){
		margin-top: 20upx;
	}
	.task-title{
		font-size: 32upx;
	}
	.task-cont{
		font-size: 24upx;
		min-height: 200upx;
	}
	
	.task-image{
		overflow: hidden;
		padding-right: 3%;
	}
	.task-image image{
		float: left;
		width: 47%;
		height: 240upx;
		margin: 3% 0 0 3%;
	}
	
</style>
